import * as THREE from 'three'
import { TrackballControls } from 'three/examples/jsm/controls/TrackballControls'

let camera, scene, renderer, controls

initRenderer()
initScene()
initAxesHelper()
initCamera()
initControls()
initLights()
initMeshes()
animate()

window.addEventListener('resize',function () {
    camera.aspect = window.innerWidth / window.innerHeight
    camera.updateProjectionMatrix()
    renderer.setSize(window.innerWidth, window.innerHeight)
    controls.handleResize()
})

function initRenderer(params) {
    renderer = new THREE.WebGLRenderer({antialias: true})
    renderer.setPixelRatio(window.devicePixelRatio)
    renderer.setSize(window.innerWidth, window.innerHeight)
    document.body.appendChild(renderer.domElement)
}

function initScene(params) {
    scene = new THREE.Scene()
    scene.background = new THREE.Color(0x222222)
}

function initAxesHelper(params) {
    scene.add(new THREE.AxesHelper(100))
}

function initMeshes(params) {
    //eg1：环形extrudde
    //path
    const closedSpline = new THREE.CatmullRomCurve3(
        [
            new THREE.Vector3(-60, -100, 60),  //左下
            
            new THREE.Vector3(-60, 20, 60), //左中
            
            new THREE.Vector3(-60, 120, 60), //左上
            new THREE.Vector3(60, 120, -60), //右上
            
            new THREE.Vector3(60, 20, -60), //右中
            
            new THREE.Vector3(60, -100, -60)  //右下
            
        ]
    );
    console.log(closedSpline);
    //extrude settings
    closedSpline.curveType = 'catmullrom';
    closedSpline.closed = true;
    const extrudeSettings = {
        steps: 100,
        bevelEnabled: false,
        extrudePath: closedSpline
    }

    //shape
    const r = 20;
    const pts1 = [], count = 100
    for (let i = 0; i < count; i++) {
        const a = i / count * 2 * Math.PI
        pts1.push(new THREE.Vector2(
            r * Math.cos(a),
            r * Math.sin(a)
        ))
    }
    const shape1 = new THREE.Shape(pts1)
    console.log(shape1);

    //geometry
    const geometry1 = new THREE.ExtrudeGeometry(shape1, extrudeSettings)
    const material1 = new THREE.MeshLambertMaterial({
        color: 0xb00000
    })
    const mesh1 = new THREE.Mesh(geometry1, material1)
    scene.add(mesh1)
    console.log(mesh1);


    //第二步 path
    const randomPoins = []
    for (let i = 0; i < 10; i++) {
        randomPoins.push(new THREE.Vector3((i - 4.5) * 50,
            THREE.MathUtils.randFloat(-50, 50),
            THREE.MathUtils.randFloat(-50, 50)
        )
        );
        const randomSpline = new THREE.CatmullRomCurve3(randomPoins)
        const extrudeSettings2 = {
            steps: 200,
            bevelEnabled: true,
            extrudePath: randomSpline
        };
        //shape
        // const pts2 = [], numPts = 7;
        // for (let i = 0; i < numPts * 2; i++) {
        //     const l = i % 2 == 1 ? 10 : 20;
        //     const a = i / numPts * Math.PI;
        //     pts2.push(new THREE.Vector2(Math.cos(a)*1,Math.sin(a)*1))
        // }
        // const shape2 = new THREE.Shape(pts2)
        // const geometry2 = new THREE.ExtrudeGeometry(shape2, extrudeSettings2);
        // const material2 = new THREE.MeshLambertMaterial({
        //     color:0xff8000
        // })
        // const mesh2 = new THREE.Mesh(geometry2, material2);
        // scene.add(mesh2)
           

    }
}


function initCamera(params) {
    camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 1000)
    camera.position.set(0,0,500)
}

function initControls(params) {
    controls = new TrackballControls(camera, renderer.domElement)
    controls.minDistance = 200
    controls.maxDistance = 500
}

function initLights(params) {
    scene.add(new THREE.AmbientLight(0x222222))

    const light = new THREE.PointLight(0xffffff)
    light.position.copy(camera.position)
    scene.add(light)
}

function animate() {
    requestAnimationFrame(animate)
    controls.update()
    renderer.render(scene, camera)
}